<template>
  <div>
    <!-- 排班表 -->
    <el-table :data="tableData" style="width: 100%" border show-summary>
      <el-table-column
        v-for="(item, index) in tableColumn"
        :key="index"
        :prop="item.prop"
        :label="item.lable"
        :width="item.width"
        align="center"
      >
        <template v-if="item.children">
          <el-table-column
            v-for="(i, k) in item.children"
            :key="k"
            :prop="i.prop"
            :label="i.lable"
            :width="i.width"
            align="center"
          />
        </template>
      </el-table-column>
    </el-table>

    <!-- 分时排班 -->
    <div>
      <el-button type="primary" @click="click">dialog</el-button>
      <testa :ref="(el) => (child = el)" />
    </div>
    <dialogs v-model="visible" title="xxx" :vNode="vNode" />
  </div>
</template>
<script setup lang="ts">
import dialogs from "@common/src/components/dialog.vue";
import { commonDialog } from "@common/src/components/componentsApi";
import addScheduling from "../../scheduling/components/addScheduling.vue";
const vNode = h(
  "div",
  {
    style: {
      color: "red",
    },
  },
  "3423424234"
);
const child = ref();
let visible = ref<boolean>(false);

const click = () => {
  commonDialog({
    modelValue: true,
    vNode: addScheduling,
    title: "标题",
  }).then((res) => {
    console.log("dialog确定，取消回调", res);
  });
};

const tableColumn = reactive([
  {
    lable: "号类",
    prop: "category",
    width: 60,
  },
  {
    lable: "号别",
    prop: "number",
    width: 70,
  },
  {
    lable: "科室",
    prop: "department",
  },
  {
    lable: "项目",
    prop: "project",
  },
  {
    lable: "医生",
    prop: "doc",
  },
  {
    lable: "已挂数",
    prop: "hang",
    width: 60,
  },
  {
    lable: "已约数",
    prop: "reservation",
    width: 60,
  },
  {
    lable: "建档",
    prop: "record",
    width: 50,
  },
  {
    lable: "周日",
    children: [
      {
        lable: "安排",
        prop: "arrange",
      },
      {
        lable: "限号",
        prop: "limit",
      },
      {
        lable: "限约",
        prop: "appointment",
      },
    ],
  },
  {
    lable: "周一",
    align: "center",
    children: [
      {
        lable: "安排",
        prop: "arrange1",
      },
      {
        lable: "限号",
      },
      {
        lable: "限约",
      },
    ],
  },
  {
    lable: "周二",
    align: "center",
    children: [
      {
        lable: "安排",
      },
      {
        lable: "限号",
      },
      {
        lable: "限约",
      },
    ],
  },
  {
    lable: "周三",
    align: "center",
    children: [
      {
        lable: "安排",
      },
      {
        lable: "限号",
      },
      {
        lable: "限约",
      },
    ],
  },
  {
    lable: "周四",
    align: "center",
    children: [
      {
        lable: "安排",
      },
      {
        lable: "限号",
      },
      {
        lable: "限约",
      },
    ],
  },
  {
    lable: "周五",
    align: "center",
    children: [
      {
        lable: "安排",
      },
      {
        lable: "限号",
      },
      {
        lable: "限约",
      },
    ],
  },
  {
    lable: "周六",
    align: "center",
    children: [
      {
        lable: "安排",
      },
      {
        lable: "限号",
      },
      {
        lable: "限约",
      },
    ],
  },
]);

interface User {
  id: string;
  category: string; //号类
  number: string; // 号别
  department: string; // 科室
  project: string; //项目
  doc: string; // 医生
  hang: number; // 已挂号数
  reservation: number; //已预约数
  record: string; // 建档
  arrange: string | number;
  limit: string | number;
  appointment: string | number;
}

const tableData = [
  {
    category: "普通",
    number: "California",
    department: "Los Angeles",
    project: "No. 189, Grove St, Los Angeles",
    hang: "CA 90036",
    reservation: 1,
    record: "string", // 建档
    arrange: 1,
    limit: 2,
    appointment: 3,
    arrange1: "322",
  },
  {
    category: "普通",
    number: "California",
    department: "Los Angeles",
    project: "No. 189, Grove St, Los Angeles",
    hang: "CA 90036",
    reservation: 1,
    record: "string", // 建档
    arrange: 1,
    limit: 2,
    appointment: 3,
  },
];
</script>

<style lang="scss" scoped>
</style>
